<template>
    <div class="media">
        <p class="mediaOneP">媒体优选</p>
		<p class="mediaTwoP"  style="font-weight:100">聚集80%知名自媒体红人，日均覆盖50亿PV，形成普及全网的覆盖<span>势态</span>。</p>
        <div class="list">
            <div class="colOne">
                <ul>
                    <li v-for = "(medias,index) in media" :key="index" :class="'item'+index">
                        <i></i>                       
                            <img v-bind:src="medias[1]" style="margin-top:-3px;">                  
                        
                        <a href="javascript:;" @click="change(index)" style="margin-left:10px;" >{{medias[0]}}</a>
                    </li>
                </ul>
            </div>
            <index-media v-if="liIndex==0"></index-media>
            <index-app v-if="liIndex==1"></index-app>
            <index-dsp v-if="liIndex==2"></index-dsp>
            <index-sem v-if="liIndex==3"></index-sem>
        </div>
    </div>
</template>
<script>
import indexMedia from "./indexMedia/indexMedia.vue"
import indexApp from "./Apprec/indexApp.vue"
import indexDsp from "./DSPsale/indexDsp.vue"
import indexSem from './SEMsale/indexSem.vue'
const imgOne = require("../../assets/img/2-indexMedia/1.png")
const imgTwo = require("../../assets/img/2-indexMedia/2-2.png")
export default {
    data(){
        return {
          media: 
            [
                ["热销媒体",imgOne],
                ["APP矩阵", imgTwo],
                ["DSP营销", imgTwo],
                ["SEM营销", imgTwo]
            ],
            show:0,
            liIndex:0
        }
    },
    methods:{
        change(index){
            for(let i = 0;i<this.media.length;i++){
                this.media[i].splice(1,1,imgTwo)
            }
            this.media[index].splice(1,1,imgOne)
            this.liIndex = index
        }
    },
    components:{
        indexMedia,
        indexApp,
        indexDsp,
        indexSem
    }
};
</script>
<style scoped>
.media {
  width: 1200px;
  /* height: 770px; */
  margin: 0 auto;
  margin-top: 71px;
  text-align: center;
}

.mediaOneP {
  font-size: 30px;
  color: rgb(34, 34, 34);
  margin-top: 120px;
}
.mediaTwoP {
  font-size: 16px;
  color: rgb(34, 34, 34);
  margin-top: 26px;
}
.list{
	overflow: hidden;
	margin-top: 60px;  
  /* box-shadow:0 0 10px gray; */
  -moz-box-shadow:0px 0px 16px #D4D4D4; -webkit-box-shadow:0px 0px 16px #D4D4D4; box-shadow:0px 0px 16px #D4D4D4;

}
.colOne{
	float: left;
	width: 200px;
	height: 558px;
	background-color: #F8F9FD;
}
.colOne ul{
	overflow: hidden;
    margin-top: 80px;
    position: relative;
}

.colOne ul li{
	width: 200px;
	height: 80px;
	line-height: 80px;
	text-align: center;
}
/* .colOne ul li:hover{
	border:1px solid #eee;
    box-shadow: 0px 2px 5px #eee;
} */

.colOne ul li div img{
	vertical-align: middle;
    
}
.colOne ul li a{
	margin-left: 17px;
	font-size: 18px;
	color: rgb(34, 34, 34);
}
</style>


